import React, { useState, useEffect, Fragment, Component } from 'react'
import './index.less'
import Right from './right.png'
import { round } from 'loadsh'
import { Input, Table } from 'antd'
const { Search } = Input;
export default class Sidebar extends Component {
    constructor(props) {
        super(props)
        this.state = {
            open: true,
            astyle: { width: '15%' },
            istyle: { transform: 'rotate(180deg)' },
            selectTitle: "btcusdt",
            search: '',
            _search: ''
        }
    }
    componentDidMount() {

    }
    handerIMG = () => {
        const props = this.props
        let { open, astyle, istyle } = this.state
        astyle = { ...astyle }
        istyle = { ...istyle }
        open = !open
        astyle.width = open ? "15%" : "90px";
        istyle.transform = open ? "rotate(180deg)" : "rotate(0deg)";
        this.setState({
            astyle,
            istyle,
            open
        })
        props.onChange && props.onChange(open)
    }
    handel = (title) => {
        const props = this.props
        props.getTitle && props.getTitle(title)
        this.setState({ selectTitle: title })
    }
    onSearch = value => this.setState({ search: value })

    get getSearch() {
        return <Search onSearch={this.onSearch}
            allowClear={true}
            onPressEnter={(e) => this.setState({ search: ((e || {}).target || {}).value || '' })}
            style={{ backgroundColor: '#1f2126' }}
        />
    }

    get getList() {
        const { open, search } = this.state
        const { dataList } = this.props
        const params = {
            columns: [
                {
                    title: '币种',
                    dataIndex: 'symbol',
                    render: t => <span className={`handel ${this.state.selectTitle === t ? 'selectTitle' : ''}`} onClick={() => this.handel(t)}>{(t || '').toLocaleUpperCase()}</span>
                },
                {
                    title: '涨幅',
                    dataIndex: 'zf',
                    render: t => <span className={`${t > 0 ? 'jj' : ''} ${t < 0 ? '_jj' : ''} `}>{t > 0 ? '+' : ''}{t}</span>,
                    sorter: (a, b) => a.zf - b.zf,
                },
            ],
            dataSource: dataList.filter(item => (item.symbol.toLocaleUpperCase()).indexOf(search.toLocaleUpperCase()) >= 0),
            pagination: false,
            style: {
                backgroundColor: '#191919'
            }
        }
        return [this.getSearch, <Table {...params} />]
        // return dataList.map((v, i) => {
        //     return (
        //         <div key={i} class={`item ${v.title === this.state.selectTitle ? 'selectT' : ''}`}>
        //             <div class="title">
        //                 <div class="bs">
        //                     <span onClick={() => this.handel(v.title)}>
        //                         {v["title"].toLocaleUpperCase()}
        //                     </span>
        //                 </div>
        //             </div>
        //             {
        //                 open ? <div>
        //                     {
        //                         v.data.map((val, _i) => {
        //                             return (
        //                                 <div class="row" key={_i}>
        //                                     {
        //                                         val.map((value, _i1) => {
        //                                             return (
        //                                                 <div class="col" key={_i1}>
        //                                                     { value} {_i1 % 2 == 0 ? <span v-if="_i1 % 2 == 0">：</span> : ''}
        //                                                 </div>
        //                                             )
        //                                         })
        //                                     }

        //                                 </div>
        //                             )
        //                         })
        //                     }

        //                 </div> : ""
        //             }

        //         </div>
        //     )
        // })
    }
    render() {
        const { astyle, istyle, open } = this.state

        return (
            <Fragment>
                <div style={astyle} className='Sidebar'>
                    {/* <div class="as-title">
                        <div class="img" style={istyle} onClick={this.handerIMG}>
                            <img src={Right} alt="" />
                        </div>
                    </div> */}
                    {
                        this.getList
                    }
                </div>
            </Fragment >
        )
    }
}
